<template>
  <div>
    <div class="g-cur">
      <div class="wp">
        <NuxtLink to="/" class="a">个人中心</NuxtLink><span> / </span>
        <span class="s">个人资料设置</span>
      </div>
    </div>

    <div class="g-rowb1">
      <div class="wp">
        <div class="m-setupb1">
          <div class="m-titb2">个人资料设置</div>
          <div class="m-infob1">
            <div class="gp">
              <div class="s">用户头像：</div>
              <div class="img" style="background-image: url()"></div>
              <div class="edit">更换头像</div>
            </div>
            <div class="gp">
              <div class="s">用户昵称：</div>
              <div class="txt">
                {{ Cookies.get('user-data') && JSON.parse(Cookies.get('user-data')).name ? Cookies.get('user-data') && JSON.parse(Cookies.get('user-data')).name : '用户默认昵称'
                }}</div>
              <div @click="visibleName = true" class="edit">修改</div>
            </div>
            <div class="gp">
              <div class="s" style="align-self: start;">邮箱账号：</div>
              <div class="dfbox">
                <div class="txt"><img src="/images/h-i4.svg" alt=""><b>修改邮箱</b></div>
                <div class="p">验证后可修改绑定的邮箱号</div>
              </div>
              <div class="edit" @click="visible = true">修改</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a-modal v-model:visible="visibleName" centered title="修改昵称" :width="585" :footer="null">
      <div class="pop-edit">
        <a-form :model="formState" :label-col="{ span: 6 }">
          <a-form-item label="昵称：">
            <a-input size="large" v-model:value="formState.name" placeholder="请输入昵称" />
          </a-form-item>
        </a-form>
        <div class="dfcen">
          <div class="sbtn" @click="success">确认修改</div>
        </div>
      </div>
    </a-modal>
    <!-- 修改邮箱弹窗 -->
    <a-modal v-model:visible="visible" centered title="修改绑定邮箱" :width="585" :footer="null">
      <div class="pop-edit">
        <a-form :model="formState" :label-col="{ span: 6 }">
          <a-form-item label="原邮箱号：">
            <a-input size="large" v-model:value="formState.oldEmail" placeholder="请输入原邮箱号" />
          </a-form-item>
          <a-form-item label="邮箱验证码：">
            <div class="bl-fxbox">
              <div class="flex1">
                <a-input size="large" v-model:value="formState.token" placeholder="请输入邮箱验证码" />
              </div>
              <div class="code-btn" :class="{'disabled':!flagOld}" @click="settimeOld()">{{textOld}}</div>
            </div>
          </a-form-item>
          <a-form-item label="新邮箱：">
            <a-input size="large" v-model:value="formState.newEmail" placeholder="请输入新邮箱号" />
          </a-form-item>
          <a-form-item label="邮箱验证码：">
            <div class="bl-fxbox">
              <div class="flex1">
                <a-input size="large" v-model:value="formState.newToken" placeholder="请输入邮箱验证码" />
              </div>
              <div class="code-btn" :class="{'disabled':!flagNew}" @click="settimeNew()">{{textNew}}</div>
            </div>
          </a-form-item>
        </a-form>
        <div class="dfcen">
          <div class="sbtn" @click="success(1)">确认修改</div>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script setup>

import { reactive, ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import Cookies from 'js-cookie';
import request from '~/services/request'
import { RouterLink, RouterView, useRouter } from 'vue-router'
const router = useRouter()
// 修改邮箱弹窗
const visible = ref(false);
const visibleName = ref(false)
const flagOld = ref(true);
const textOld = ref("获取验证码");
const flagNew = ref(true);
const textNew = ref("获取验证码");
const formState = reactive({
  token: '',
  newEmail: '',
  name: '',
  newToken: '',
  oldEmail:'',
});
const success = (type) => {
  if (type != 1) {
    if(formState.name=!JSON.parse(Cookies.get('user-data')).name){
      request.update_users({ id: JSON.parse(Cookies.get('user-data')).id, name: formState.name }).then(res => {
      Cookies.set('user-data', JSON.stringify(res))
      message.success({
        content: () => '修改成功',
        class: 'custom-class',
        style: {
          marginTop: '20vh',
        },
      });
      visibleName.value = false;
    })
    }else{
      message.error({
        content: () => '昵称相同无需修改！',
        class: 'custom-class',
        style: {
          marginTop: '20vh',
        },
      });
    }
  } else {
    request.update_bind_email({ id: JSON.parse(Cookies.get('user-data')).id, token: formState.token, newEmail: formState.newEmail, newToken: formState.newToken }).then(res => {
      message.success({
        content: () => '绑定邮箱修改成功',
        class: 'custom-class',
        style: {
          marginTop: '20vh',
        },
      });
      visible.value = false;
    })
  }
};
const settimeOld = () => {
  getCode(formState.oldEmail)
  var numOld = 121;

  if (flagOld.value) {
   
    flagOld.value = false;
    var timerOld = setInterval(function () {
      numOld--;
      if (numOld <= 0) {
        clearInterval(timerOld);
       
        textOld.value = "重新发送";
        flagOld.value = true;
      } else {
        
        textOld.value =  numOld + "s";
      }
    },
      1000)
  } else {
    return false;
  }


}
const settimeNew = () => {
  getCode(formState.newEmail)
  var numNew = 121;

  if (flagNew.value) {
   
    flagNew.value = false;
    var timerNew = setInterval(function () {
      numNew--;
      if (numNew <= 0) {
        clearInterval(timerNew);
       
        textNew.value = "重新发送";
        flagNew.value = true;
      } else {
        
        textNew.value =  numNew + "s";
      }
    },
      1000)
  } else {
    return false;
  }


}
const getCode=(email)=>{
  request.send_auth_magicLink({"email": email})
  .then(res => {
    message.success({
    content: () => '发送成功',
    class: 'custom-class',
    style: {
      marginTop: '20vh',
    },
  });
  })
}
onMounted(async () => {
  if (!Cookies.get('user-data')) {
    message.error({
      content: () => '请先登录！',
      class: 'custom-class',
      style: {
        marginTop: '20vh',
      },
    });
    router.push('/login')
  }
});
</script>

<style></style>
